import React from 'react'
import { asyncIncreAction, decre, incre }  from '../../app/slices/countSlice'
import { incre as add, decre as sub} from '../../app/slices/zanSlice'

import { useSelector, useDispatch } from 'react-redux'
export default function ReduxCom() {
  //获取 redux 中的状态
  let state = useSelector(state => state);
  //获取更新状态的函数
  let dispatch = useDispatch();

  return (
    <div>
      <h2>{state.count}</h2>
      <button onClick={() => {
        dispatch(incre(1));
      }}>新增</button>
      <button onClick={() => {
        dispatch(decre(1));
      }}>减少</button>
      <button onClick={() => {
        dispatch(asyncIncreAction(1));
      }}>异步新增</button>
      <hr />
      <h2>点赞数: {state.zan.value}</h2>
      <button onClick={() => {
        dispatch(add(1));
      }}>点赞</button>
    </div>
  )
}
